<template>
  <div class="hello">
    <!-- 获取数据 -->
    <h1>{{title}}</h1>
    <p>{{user.firstName}}</p>
    <p>{{user.lastName}}</p>

    <!-- v-if -->
    <p v-if="showName">{{user.firstName}}</p>
    <p v-else>laowu</p>

    <!-- v-for -->
    <ul>
      <li v-for="item in items">{{item.title}}</li>
    </ul>

    <!-- v-on -->
    <button v-on:click="greet('hello')">submit</button>
    <br>

    <!-- 计算属性 -->
    <input type="text" v-model="user.firstName">
    <br>
    <input type="text" v-model="user.lastName">
    <br>
    <h3>{{fullName}}</h3>

    <!-- props 属性 -->
    <h2>{{msg}}</h2>





  </div>
</template>

<script>
  export default {
    name: 'Test',
    props:{
      msg:{
        type:String,
        default:"默认就是当前这些文字"
      }
    },
    data() {
      return {
        title: 'Hello Vue.js!',
        user: {
          firstName: "zhangsan",
          lastName: "lisi"
        },
        showName: false,
        items: [
          {title: "item 1"},
          {title: "item 2"},
          {title: "item 3"},
          {title: "item 4"}
        ]
      }
    },
    methods: {
      greet: function (str) {
        alert(str);
      }
    },
    computed:{
      fullName:function(){
        return this.user.firstName + " " + this.user.lastName;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

</style>
